<template>
  <div>
    <el-dialog title="员工详情" :visible.sync="showDialog_" custom-class='dialog_right MkStaffDetail PublicDetailStyle dialogScroll_detail' top='0%' @close='closeDialog' @open='openDialog'>
      <div class="operationBtnInRightDialog">
        <!--<span class='editInfoIcon' @click="" ><i class="el-icon-edit"></i> 编辑</span>-->
        <mk-permission :perms="['Ticket:SystemManagement:UserAccount:update']">
          <span class='infoIcon' @click="dialogVisible_add=true" ><i class="el-icon-edit"></i> 编辑</span>
        </mk-permission>
      </div>
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-110)+'px'}]">
        <div class="contentDiv">
          <div class="basicInfo">
            <el-row>
              <el-col :span='4' class='infoName'>员工工号</el-col>
              <el-col :span='20' class='infoValue'>{{staffDetail.number}}</el-col>
            </el-row>
            <el-row>
              <el-col :span='4' class='infoName'>员工姓名</el-col>
              <el-col :span='20' class='infoValue'>{{staffDetail.name}}</el-col>
            </el-row>
            <el-row>
              <el-col :span='4' class='infoName'>手机号</el-col>
              <el-col :span='20' class='infoValue'>{{staffDetail.phone}}</el-col>
            </el-row>
            <el-row>
              <el-col :span='4' class='infoName'>身份证号</el-col>
              <el-col :span='20' class='infoValue'>{{staffDetail.idCard}}</el-col>
            </el-row>
            <el-row>
              <el-col :span='4' class='infoName'>系统权限</el-col>
              <el-col :span='20' class='infoValue'>{{staffDetail.role.name}}</el-col>
            </el-row>
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
    <!--  修改 -->
    <MkAddStaff :showDialog='dialogVisible_add' :currentCustomer='staffDetail' v-on:closeDialog='closeDialog_add'></MkAddStaff>
  </div>
</template>

<script>
  import settingService from '../../../services/setting'
  import MkPermission from "../../../components/MkPermission";
  import MkAddStaff from './MkAddStaffNumber.vue'
  import {mapState} from 'vuex'
  export default {
    name: 'MkStaffDetail',
    components: {
      MkAddStaff,MkPermission
    },
    props: ['showDialog','currentStaffId'],
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
    }),
    methods: {
      closeDialog() {
        this.$emit('closeDialog',this.isRefresh);
      },
      openDialog() {
        this.isRefresh = 'no';
        this.loadingTab = true;
        this.searchData.id=this.currentStaffId;
        settingService.StaffDetail(this.searchData, (data) => {
          this.staffDetail = data.data;
          this.loadingTab = false;
        })
      },
      closeDialog_add(type) {
        this.isRefresh = type;
        this.dialogVisible_add=false;
        this.showDialog_ = false;
      }
    },
    mounted: function() {
    },
    watch: {
      showDialog: function(value) {
        this.showDialog_=value;
      },
      dialogVisible_add() {}
    },
    data () {
      return {
        scrollContainerHeight: 0,
        screenHeight: 0,
        showDialog_: this.showDialog,
        dialogVisible_add: false,
        staffDetail:{
          role:{
          	name:''
          }
        },
        searchData:{
          fields:'id,number,name,phone,idCard,role',
//          fields:'',
          id:'',
        }
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import '../../../assets/style/main.less';
  .MkStaffDetail{
    .operationBtn{
      position: absolute;
      top: 30px;
      right: 80px;
      .editInfoIcon{
        padding: 5px 10px;
        cursor: pointer;
        color: #81939e;
        &:hover{color: @primaryColor}
      }
    }
  }
</style>
